<template>
	<view class="group-edit-container">
		<!-- 药品列表 -->
		<view class="medicine-list">
			<view class="medicine-item" v-for="(item, index) in medicineList" :key="index">
				<view class="medicine-info">
					<view class="medicine-name">{{ item.name }}</view>
					<uni-icons type="trash" size="20" color="#999" @click="deleteMedicine(index)"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="bottom-buttons">
			<button class="cancel-btn" @click="handleCancel">取消保存</button>
			<button class="save-btn" @click="handleSave">保存组合</button>
		</view>

		<!-- 编辑组合名称的弹框 -->
		<uni-popup ref="editDialog" type="dialog">
			<view class="edit-dialog">
				<view class="dialog-title">编辑组合名称</view>
				<input
					class="dialog-input"
					v-model="groupName"
					placeholder="请输入组合名称"
				/>
				<view class="dialog-buttons">
					<button class="dialog-btn cancel-btn" @click="closeEditDialog">取消</button>
					<button class="dialog-btn confirm-btn" @click="confirmEditDialog">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { useMedicineStore } from '../../store/medicine';
const medicineStore = useMedicineStore()

export default {
	setup(){
		return{
			medicineStore
		}
	},
	data() {
		return {
			medicineList: [], // 药品列表
			groupName: '', // 组合名称
		};
	},
	onLoad(options) {
		if (options.selectedMedicines) {
			const selectedMedicines = JSON.parse(decodeURIComponent(options.selectedMedicines));
			this.medicineList = selectedMedicines
			console.log('已添加的药品信息：', selectedMedicines);
		}
	},
	methods: {
		// 删除药品
		deleteMedicine(index) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这个药品吗？',
				success: (res) => {
					if (res.confirm) {
						this.medicineList.splice(index, 1);
					}
				},
			});
		},

		// 处理取消保存
		handleCancel() {
			uni.navigateBack();
		},

		// 处理保存组合
		handleSave() {
			this.$refs.editDialog.open(); // 打开编辑组合名称的弹框
		},

		// 关闭编辑弹框
		closeEditDialog() {
			this.$refs.editDialog.close();
		},

		// 确认编辑弹框
		confirmEditDialog() {
			if (this.groupName.trim() === '') {
				uni.showToast({
					title: '请输入组合名称',
					icon: 'none',
				});
				return;
			}

			// 模拟保存组合逻辑
			const groupData = {
				name: this.groupName,
				medicines: this.medicineList.map(item => item.id).join(','),
			};
			medicineStore.saveDrugGroup(groupData)
			uni.showToast({
				title: '保存成功',
				icon: 'success',
			});

			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		},
	},
};
</script>

<style lang="scss">
.group-edit-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;

	.medicine-list {
		.medicine-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.medicine-info {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.medicine-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.uni-icons {
					cursor: pointer;
				}
			}
		}
	}

	.bottom-buttons {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.cancel-btn,
		.save-btn {
			flex: 1;
			margin: 0 10rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
		}

		.cancel-btn {
			background-color: #f8f8f8;
			color: #666;
			border: 1rpx solid #ddd;

			&:active {
				background-color: #e0e0e0;
			}
		}

		.save-btn {
			background-color: #2ac2d1;
			color: #fff;
			border: none;

			&:active {
				background-color: #24a8b5;
			}
		}
	}

	.edit-dialog {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 12rpx;
		width: 600rpx;

		.dialog-title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.dialog-input {
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			padding: 16rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
		}

		.dialog-buttons {
			display: flex;
			justify-content: space-between;

			.dialog-btn {
				flex: 1;
				margin: 0 10rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
			}

			.cancel-btn {
				background-color: #f8f8f8;
				color: #666;
				border: 1rpx solid #ddd;

				&:active {
					background-color: #e0e0e0;
				}
			}

			.confirm-btn {
				background-color: #2ac2d1;
				color: #fff;
				border: none;

				&:active {
					background-color: #24a8b5;
				}
			}
		}
	}
}
</style>